BootstrapVue — Table Filtering and Loading

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

We look at how to customize table contents, including filtering.

Filtering

BootstrapVue table contents can be filtered.

To add built-in filtering features, we can add the filter prop.

For example, we can write:

<template>
  <div id="app">
    <b-table :items="items" filter="may"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { id: 1, firstName: "alex", lastName: "green" },
        {
          id: 2,
          firstName: "may",
          lastName: "smith"
        },
        { id: 3, firstName: "james", lastName: "jones" }
      ]
    };
  }
};
</script>

We just pass in a string into the filter prop and it’ll find the rows with the word 'may' in it by searching all properties.

Also, we can pass in a regex to filter by a pattern.

Pagination

We can use the b-pagination component with b-table to control pagination.

For example, we can write:

<template>
  <div id="app">
    <b-table :items="items" :per-page="perPage" :current-page="currentPage"></b-table>
    <b-pagination v-model="currentPage" :total-rows="items.length" :per-page="perPage"></b-pagination>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      currentPage: 1,
      perPage: 2,
      items: [
        { id: 1, firstName: "alex", lastName: "green" },
        {
          id: 2,
          firstName: "may",
          lastName: "smith"
        },
        { id: 3, firstName: "james", lastName: "jones" }
      ]
    };
  }
};
</script>

We set the per-page and current-page props to perPage and currentPage respectively.

perPage is fixed to 2.

currentPage is updated when we click on the button rendered by b-pagination .

b-pagination also has the total-rows prop so that it can render the right number of buttons.

v-model is bound to currentPage so that it’s updated when we click the buttons.

Now we get pagination in our table.

Items Provider Functions

We can add an items provider function to provide items.

It can be synchronous or async.

For example, we can make a synchronous one by writing:

function provider() {
  let items = [];
  return items || [];
}

To make an async provider function, we can write:

function provider(ctx, callback) {
  this.fetchData(`/some/url?page=${ctx.currentPage}`)
    .then(data => {
      const items = data.items;
      callback(items)
    })
    .catch(() => {
      callback([])
    })
  return null
}

We return null or undefined to tell b-table that a callback is being used.

The data that we use to fetch the data is in the ctx parameter.

ctx comes from the props.

callback is called with the fetched items to display it with b-table .

We can also use an async function:

async function provider(ctx) {
  try {
    const response = await axios.get(`/some/url?page=${ctx.currentPage}`)
    return response.items;
  } catch (error) {
    return []
  }
}

They can be set as the value of the items prop:

<template>
  <div id="app">
    <b-table :items="provider"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {

};
  },
  methods: {
    provider(){
      return [
        { id: 1, firstName: "alex", lastName: "green" },
        {
          id: 2,
          firstName: "may",
          lastName: "smith"
        },
        { id: 3, firstName: "james", lastName: "jones" }
      ]
    }
  }
};
</script>

Refresh Table Data

We can force the refresh of data table by emitting the bv::refresh::table event.

For example, we can write:

this.$root.$emit('bv::refresh::table', 'table')

to refresh the table with ref table .

Also, we can write:

this.$refs.table.refresh()

Detection of Sorting Change

The b-table component can handle the sort-changed event if we set an event handler for it.

For example, we can write:

<b-table @sort-changed="sortingChanged" ... ></b-table>

Then we can write:

export default {
  methods: {
    sortingChanged(ctx) {
      // ...
    }
  }
}

The ctx parameter is an object with the sortBy with the key that the rows are sorted by.

It also has the sortDesc boolean property which is true if we sort in descending order.

Light Weight Tables

b-table-lite is a light version of the b-table component.

It’s great for creating a simple table.

It doesn’t have most of the features of b-table like filtering, sorting, pagination, and other dynamic features.

Conclusion

We can add filtering to our table with the filter prop.

Also, we can force refresh a table and add provider functions to load data instead of assigning the data directly to it.